<template>
   <div>
    <el-date-picker
    v-model="internalDateTime"  
    :value-format="valueFormat"
    type="daterange"
    align="right"
    unlink-panels
    range-separator="——"
    :start-placeholder="$t('Start_time')"
    :end-placeholder="$t('End_time')"
    :picker-options="pickerOptions"
    @change="handleChange" 
  />
  {{internalDateTime}}
   </div>
  </template>
  
  <script>
  export default {
    name: 'DateRangePicker',
    props: {
      // 父组件传递的日期时间值，默认通过 v-model 绑定
      modelValue: {
        type: Array,
        required: true,
      },
      // 父组件传递的 value-format
      valueFormat: {
        type: String,
        default: 'yyyy-MM-dd hh:mm:ss',
      },
    },
    data() {
      return {
        // 内部值，绑定到 el-date-picker 上
        internalDateTime: this.modelValue,
        pickerOptions: {
          shortcuts: [
            {
              text: this.$t('Yesterday'),
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              },
            },
            {
              text: this.$t('Last_7_days'),
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              },
            },
            {
              text: this.$t('Last_month'),
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              },
            },
          ],
        },
      };
    },
    watch: {
      // 监听父组件的 modelValue，并更新 internalDateTime
      modelValue(newValue) {
        this.internalDateTime = newValue;
      },
      // 监听 internalDateTime 的变化，并更新父组件的 modelValue
      internalDateTime(newValue) {
        this.$emit('update:modelValue', newValue);
        console.log('Updating modelValue:', newValue);
      },
    },
    methods: {
      handleChange() {
        // 选择日期后，更新父组件的值
        this.$emit('update:modelValue', this.internalDateTime);

      },
    },
  };
  </script>
  
  <style scoped>
  /* 组件样式根据需求添加 */
  </style>
  